import React from 'react';
import { BottomSheetModal, BottomSheetView } from '@gorhom/bottom-sheet';
import { Text, TouchableOpacity } from 'react-native';
import CustomBottomSheetBackdrop from '@/components/CustomBottomSheetBackdrop';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useAppTheme } from 'tsun-smart-ui';
import { useTranslation } from 'react-i18next';

type ActionSheetProps = {
  actions: {
    title: string;
    onPress: () => void;
  }[];
  title?: string;
  cancelButtonTitle?: string;
  cancelButtonNeeded?: boolean;
};

const ActionSheet = React.forwardRef<BottomSheetModal, ActionSheetProps>(
  (props, ref) => {
    const { t } = useTranslation();
    const cancelButtonNeeded = props.cancelButtonNeeded ?? true;
    const safeAreaInsets = useSafeAreaInsets();
    const appTheme = useAppTheme();
    return (
      <BottomSheetModal
        ref={ref}
        backdropComponent={CustomBottomSheetBackdrop}
        enablePanDownToClose
        handleStyle={{
          backgroundColor: appTheme.colors?.background?.disabled,
          borderTopLeftRadius: 16,
          borderTopRightRadius: 16,
        }}
        backgroundStyle={{
          backgroundColor: appTheme.colors?.background?.disabled,
        }}
      >
        <BottomSheetView
          className="px-4 bg-fill1 gap-y-3"
          style={{ paddingBottom: safeAreaInsets.bottom }}
        >
          {props.title && (
            <Text className="text-text1 text-[16px] mb-3 px-3">
              {props.title}
            </Text>
          )}
          {props.actions.map((action) => (
            <TouchableOpacity
              key={action.title}
              className="rounded-md border-[1px] border-line1 px-3 py-3"
              onPress={() => {
                // @ts-ignore
                ref?.current?.close();
                action.onPress();
              }}
            >
              <Text className="text-text1 text-[16px] font-normal">
                {action.title}
              </Text>
            </TouchableOpacity>
          ))}
          {cancelButtonNeeded && (
            <TouchableOpacity
              onPress={() => {
                // @ts-ignore
                ref.current?.close();
              }}
              className="px-3 py-3"
            >
              <Text className="text-text1 text-[16px]">
                {props.cancelButtonTitle ?? t('user.logOutCancel')}
              </Text>
            </TouchableOpacity>
          )}
        </BottomSheetView>
      </BottomSheetModal>
    );
  }
);

export default React.memo(ActionSheet);
